<template>
  <div>
    <div class="top0">
      <el-image style="width: 80px; height: 40px;margin-left:24px" class="fl" :src="require('@/assets/image/logo.png')" fit="fill"></el-image>
      <div class="top-title fl">岗位能力考核系统</div>
    </div>
    <div class="main">
      <div style="width:100%;height:24px"></div>
      <div v-for="(item, index) in table" :key="index" :class="(index%2==0?' fl':' fr')+(item.statusId!=2?' card1':' card2')">
        <div class="card-title">{{item.name}}</div>
        <div class="card-text">开始时间：{{item.computerStartDatetime}}</div>
        <div class="card-text">结束时间：{{item.computerEndDatetime}}</div>
        <div class="card-text">总分：{{item.totalScore}}</div>
        <!-- <div class="card-text">考场：{{item.name}}</div> -->
        <div class="card-bottom">
          <div>地点：{{item.computerPlace}}</div>
          <div class="button shou" v-if="item.statusId==2" @click="dialog=true">
            开始考试<i class="el-icon-arrow-right" style="font-size:18px;font-weight:bold"></i>
          </div>
          <div class="button1" v-else-if="item.statusId==1">
            考核已结束
          </div>
          <div class="button1" v-else>
            考核已结束
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="拍照确认" width="50%" :visible.sync="dialog">
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="dialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      span1: 3,
      span2: 9,
      dialog: false,
      index_jibie: 0,
      value: '',
      values: [],
      table: [],
      jibies: [{
        name: '级别一',
        value: 1,
      }, {
        name: '级别二',
        value: 2,
      }],
      zhuanyes: [{
        panduan: false
      },{
        panduan: false
      }],
      form: {
        account: '',
        createDatetime: '',
        id: '',
        idcard: '',
        logicalDelete: false,
        name: '',
        password: '',
        phone: '',
        portrait: '',
        professionId: '',
        sex: '',
        statusId: ''
      }
    }
  },
  mounted () {
    this.form = JSON.parse(localStorage.getItem('info'))
    this.$http.get('/examinee/exam/query/examlist/' + this.form.id).then(response => {
        if (response.success) {
          this.table = response.data
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
  },
  methods: {
    toReady(item) {
      // localStorage.setItem('shijuan', JSON.stringify(item))
      // this.$router.push({
      //     path:"/ready",//目标路径
      //     query:{
      //         id: item.paperId,//要传的值
      //     }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-jibie{
  float: left;
  width: 60px;
  height: 46px;
  margin-right: 30px;
  color: rgba(153, 153, 153, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-Regular;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-select {
  color: #1890FF;
  border-bottom: 2px solid #1890FF;
}
.top-right{
  float: right;
  width: 100px;
  height: 36px;
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
  text-align: left;
  font-family: MicrosoftYaHei-Bold;
  border-radius: 4px;
  background-color: rgba(24, 144, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.add{
  width:100%;
  height: 41px;
  margin: 24px 0 20px 0;

  color: rgba(24, 144, 255, 100);
  font-size: 16px;
  font-family: MicrosoftYaHei;

  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(24, 144, 255, 1);
  border-radius: 4px;
}
.icon-color1{
  color: #C2C3C4;
}
.icon-color2{
  color: rgba(51, 51, 51, 1);
}
.label{
  line-height:30px;
  float: right;
}
.el-col{
  margin-bottom:10px;
}
.top-title{
    color: rgba(102, 102, 102, 100);
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    margin-left: 12px;
}
.card{
  width: 100%;
  overflow: hidden;
}
.card1{
  width: calc(50% - 14px);
  // height: 208px;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 24px 26px 15px 30px;
  background-color: rgba(255, 255, 255, 1);
  color: #999999;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  .card-title{
    color: #666666!important;
  }
}
.card2{
  width: calc(50% - 14px);
  // height: 208px;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 24px 26px 15px 30px;
  background-color: rgba(227, 237, 255, 1);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(30, 144, 251, 1);
  color: #666666;
  font-size: 14px;
  font-family: MicrosoftYaHei;
}
.card-title{
  color: rgba(51, 51, 51, 100);
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  margin-bottom: 10px;
}
.card-text{
  margin-top: 6px;
}
.card-bottom{
  width:100%;
  min-height:32px;
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  // align-items:center;
}
.button{
  margin-top: -3px;
  min-width:93px;
  height: 26px;
  padding-left: 3px;
  font-size: 18px;
  font-weight: bold;
  font-family: MicrosoftYaHei;
  color: #1E90FB;
  border-bottom: 2px solid #1E90FB;
}
.button1{
  margin-top: -3px;
  min-width:100px;
  color: #999999;
  font-size: 18px;
  font-weight: bold;
  font-family: MicrosoftYaHei;
}
.top0{
  widows: 100%;
  height: 94px;
  display: flex;
  // justify-content:center;
  align-items:center;
  background-color: white;
}
</style>
